<!--
	自定义滑块组组件
	Created by Penglei on 2023/08/09
-->
<template>
	<ul class="slider-group">
		<li class="slider-group-item" :class="['title-position-' + titlePosition, 'value-position-' + valuePosition]"
			v-for="(item, index) in props.list" :key="index" :style="{ ...props.sliderStyle, margin: props.itemMaring }">
			<!-- 标题和值显示 -->
			<div v-if="titlePosition == 'outside' || titlePosition == 'inside'" class="slider-group-item-title"
				v-html="item.title || ''" :style="{ ...props.titleStyle }"></div>
			<div v-if="titlePosition == 'up' || valuePosition == 'up'" class="slider-group-item-top">
				<div class="slider-group-item-title" :style="{ ...props.titleStyle }">
					<span v-if="titlePosition == 'up'" v-html="item.title || ''"></span>
				</div>
				<div class="slider-group-item-value" :style="{ ...props.valueStyle }">
					<span v-if="valuePosition == 'up'" v-html="item.valueInfo? item.valueInfo : (item.value ? item.value + '%' : '')"></span>
				</div>
			</div>
			<!-- 滑块 -->
			<el-slider class="item-slider" v-model="item.value" :max="100" :step="2" :disabled="props.disabled"
				:format-tooltip="props.formatTooltip" :marks="marks" @change="onChange" />
			<!-- 标题和值显示 -->
			<div v-if="valuePosition == 'outside' || valuePosition == 'inside'" class="slider-group-item-value"
				v-html="item.value ? item.value + '%' : ''" :style="{ ...props.valueStyle }"></div>
			<div v-if="titlePosition == 'down' || valuePosition == 'down'" class="slider-group-item-bottom">
				<div class="slider-group-item-title" :style="{ ...props.titleStyle }">
					<span v-if="titlePosition == 'down'" v-html="item.title || ''"></span>
				</div>
				<div class="slider-group-item-value" :style="{ ...props.valueStyle }">
					<span v-if="valuePosition == 'down'" v-html="item.value ? item.value + '%' : ''"></span>
				</div>
			</div>
		</li>
	</ul>
</template>

<script setup name="SliderGroup">
import { ref, reactive, defineProps } from 'vue';

// 父组件传参
const props = defineProps({
	// 数据列表
	list: {
		type: Array,
		default: () => [],
	},
	// 显示标记内容
	marks: {
		type: [Object, null],
		default: null,
		// 参数格式
		// default: {
		// 	0: '0%',
		// 	100: '100%',
		// 	50: {
		// 		style: {
		// 			color: '#1989FA',
		// 		},
		// 		label: '50%',
		// 	},
		// },
	},
	// 每项间距
	itemMaring: {
		type: String,
		default: () => '10px auto',
	},
	// 标题显示位置，居左显示（outside：外，inside：内， up: 上，down: 下）
	titlePosition: {
		type: String,
		default: () => 'outside',
	},
	// 值显示位置，居右显示（outside：外，inside：内， up: 上，down: 下）
	valuePosition: {
		type: String,
		default: () => 'outside',
	},
	// 标题样式
	titleStyle: {},
	// 值样式
	valueStyle: {},
	// 滑块样式
	sliderStyle: {},
	// 控制器样式
	controlsStyle: {},
	// 提示信息
	formatTooltip: {
		type: Function,
		default: (val) => {
			return val / 100
		}
	},
	// 禁用
	disabled: {
		type: Boolean,
		default: () => false,
	},
});

// 标记
const marks = ref(props.marks);
// 滚动条值变化事件监听
const onChange = (val) => {
	// 有标记的时候更新标记
	if (marks && marks.value) {
		marks.value = {
			0: '0%',
			100: '100%',
			[val]: {
				style: {
					color: '#1989FA',
				},
				label: val + '%',
			},
		};
	}
}
</script>

<style lang="scss" scoped>
:deep(.el-slider) {
	width: 380px;

	.el-slider__runway {
		height: 30px;
		background: linear-gradient(#1D388F 0%, #0B1864 53%, #1D388F 100%);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		border: 1px solid #475ADB;

		.el-slider__bar {
			margin: 0 10px;
			top: 10px;
			height: 10px;
			background: url('@/assets/images/intensity/slider-bar.png') repeat-x;
		}

		.el-slider__button-wrapper {
			top: 0;
			height: 100%;

			.el-slider__button {
				margin-left: 8px;
				width: 15px;
				height: 15px;
				background: url('@/assets/images/intensity/slider-arrow.png') no-repeat center;
				background-size: 100% 100%;
				border: none;
				border-radius: 0;
				margin-bottom: -2px;
				// background: #46FFFF;
				// box-shadow: 0px 0px 6px 1px #46FFFF;
				// opacity: 1;
				// border: none;
			}
		}
	}

	.el-slider__marks {
		.el-slider__marks-text {
			margin-top: 20px;
			// 若要显示在顶部
			// margin-top: -25px;
		}
	}
}

.slider-group {
	margin: 0;
	padding: 0 10px;

	&-item {
		display: flex;
		flex-wrap: wrap;
		position: relative;

		&-top,
		&-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>div {
				width: 50%;
			}
		}

		// 标题
		&-title {
			font-size: 18px;
			color: #FFFFFF;
		}

		// 值
		&-value {
			font-size: 16px;
			color: #46FFFF;
		}

		// 滑块
		.item-slider {
			height: 32px;
			line-height: 32px;
			margin: 0 10px 0 0;
		}
	}

	// 标题显示位置
	.title-position-outside {

		// 标题
		.slider-group-item-title {
			text-align: right;
			line-height: 32px;
		}
	}

	.title-position-inside {

		// 标题
		.slider-group-item-title {
			position: absolute;
			left: 30px;
			top: 50%;
			margin-top: -16px;
			text-align: left;
			line-height: 32px;
		}

		// 滑块
		.item-slider {
			width: 100%;
		}
	}

	// 值显示位置
	.value-position-outside {

		// 值
		.slider-group-item-value {
			line-height: 32px;
		}
	}

	.value-position-inside {

		// 值
		.slider-group-item-value {
			position: absolute;
			right: 10px;
			top: 50%;
			margin-top: -16px;
			text-align: right;
			line-height: 32px;
		}
	}
}
</style>